
import React from 'react';
import Cell from './Cell';
import * as mobx from 'mobx';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import base from '../../util/base';
@inject('smartGuessStore')
@observer
export default class Container extends React.Component {

   
    componentWillMount() {
      let { commonParam = {}, smartGuessStore } = this.props;
      const { getCellArr, setState,  init} = smartGuessStore;
      const { location = {}} = this.props;
     
      //处理来自移动端单页访问请求
      if(location.query && Object.keys(location.query).length > 0 && (window.location.href.indexOf('isFromMobile') > -1)){
        let clientWidth = document.body.clientWidth;
        let callbackFun = window.parent.changeBtnStatus;
        init(location.query);
        getCellArr({}, callbackFun);
        setState({clientWidth: clientWidth});
      }
    }
    
    componentDidMount() {
      const {  smartGuessStore } = this.props;
      const { getCellArr, stopResetFlag, setState, getResetForecast} = smartGuessStore;
      //抛出重新预测方法至全局window
      window.getForecast = function() {
        if(!stopResetFlag) {
          let callbackFun =  window.parent && window.parent.changeBtnStatus || null;
          getResetForecast(callbackFun);
          setState({stopResetFlag: true})
        }

      }
    }

    componentDidUpdate() {
      const { smartGuessStore } = this.props;
      const { getCellArr, stopGetArrFlag, isloading } = smartGuessStore;
      let that = this;
      if(!isloading && !stopGetArrFlag) {
        this.Timer = setTimeout(() => {
          that.Timer&& clearTimeout(that.Timer); 
          that.getArr({});
        }, 1000)
      }
    }
    getArr() {
      let callbackFun = window.parent.changeBtnStatus;
      const{ getCellArr } = this.props.smartGuessStore;
      getCellArr({}, callbackFun);
    }
    componentWillUnmount() {
      const { clearStore } = this.props.smartGuessStore;
      clearStore();
    }
  
    insertCell(arr) {
      const { smartGuessStore } = this.props;
      const { clientWidth } = smartGuessStore;
      let screenWidth = 0;
      if(window.location.href.indexOf('isFromMobile') > -1) { //处理智能预测中，移动端智能预测按钮关闭
        screenWidth = clientWidth;
      } else {
        screenWidth = document.body.clientWidth;
      }
      let isFromMobile = false;
      if(screenWidth < 400) {
        isFromMobile = true;
      }
      let rowCellCount = Math.floor(screenWidth/(156+76));
      let maxCellCount = Math.min(rowCellCount, 6); //设置每行最多放置6个矩形，也可以不设置最大放置值，随屏幕自适应
      let wrapBoxCount = Math.ceil(arr.length/maxCellCount);
      //将元素节点分组
      let cellArr = [], newArr = arr;
      while(newArr.length > maxCellCount) { //由于获取不到屏幕宽度，进入死循环卡死(内存溢出)的问题
        let arr = newArr.slice(0,maxCellCount);
        newArr.splice(0,maxCellCount);
        newArr = newArr;
        cellArr.push(arr);
      }
      cellArr.push(newArr);
      //移动端与PC端做显示适配
      if(!isFromMobile) {
        return cellArr.map((item,index) => {
          if(index % 2 == 0){
            if(index !== cellArr.length-1) {
              return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@yn3elt@${index}`} isFromMobile={'notFromMobile'}
                      smartGuessStore={smartGuessStore} 
                      cellCount={maxCellCount} 
                      islastArr={false} 
                      arrowPoint={'right'} 
                      arrowTurn={'left'} 
                      cellInfo={item} 
                      prefixCls={'wrap-box-flex-left'}/>
            } else {
              return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@gw3jyj@${index}`}  isFromMobile={'notFromMobile'}
                      smartGuessStore={smartGuessStore} 
                      cellCount={maxCellCount} 
                      islastArr={true} 
                      arrowPoint={'right'} 
                      cellInfo={item} 
                      prefixCls={'wrap-box-flex-left'}/>
            }
          } else {
            if(index !== cellArr.length-1) {
              return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@5ikwyb@${index}`}  isFromMobile={'notFromMobile'}
                      smartGuessStore={smartGuessStore} 
                      cellCount={maxCellCount} 
                      islastArr={false} 
                      arrowPoint={'left'} 
                      arrowTurn={'right'} 
                      cellInfo={item} 
                      prefixCls={'wrap-box-flex-right'}/>
            } else {
              return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@kb9qw3@${index}`}  isFromMobile={'notFromMobile'}
                      smartGuessStore={smartGuessStore} 
                      cellCount={maxCellCount} 
                      islastArr={true} 
                      arrowPoint={'left'} 
                      cellInfo={item} 
                      prefixCls={'wrap-box-flex-right'}/>
            }
          }
        })
      } else {
        return cellArr.map((item,index) => { 
          if(index !== cellArr.length-1) {
            return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@rd3y9o@${index}`}  isFromMobile={'isFromMobile'}
                    wrapBoxCount = {wrapBoxCount}
                    smartGuessStore={smartGuessStore} 
                    cellCount={maxCellCount} 
                    islastArr={false} 
                    arrowPoint={'down'} 
                    arrowTurn={'down'} 
                    cellInfo={item} 
                    prefixCls={'wrap-box-flex-down'}/>
          } else {
            return <Cell ecId={`${this && this.props && this.props.ecId || ''}_Cell@ydktcr@${index}`} isFromMobile={'isFromMobile'}
                wrapBoxCount = {wrapBoxCount}              
                smartGuessStore={smartGuessStore} 
                cellCount={1} 
                islastArr={true} 
                arrowPoint={'down'} 
                arrowTurn={'down'} 
                cellInfo={item} 
                prefixCls={'wrap-box-flex-down'}/>
          }
        })
      }
    }

    //设置操作者信息面板隐藏
    setPanelVisible = () => {
      const { setHiddenSelectPanel } = this.props.smartGuessStore;
      setHiddenSelectPanel();
      let obj = document.getElementById('wfFrontOperator-container');
      if(obj) {
        obj.style.visibility = 'hidden';
      }
    } 


    render() {
      const { smartGuessStore } = this.props;
      const { smartGuessStatus, allMapshow, nodeArr=[]} = smartGuessStore;
    
      return (
        <div id='smart-map-wrap' onClick={this.setPanelVisible}>
          <div id="smartGuessPicBox" style={{paddingBottom: '10px'}}>
              {nodeArr && nodeArr.length !== 0  && this.insertCell( toJS(nodeArr))}  
          </div>
        </div>
      )
    }
  
}